<!-- 合同-合同列表-合同解除 -->
<template>
  <ContentCard>
    <template #header>
      <PageHeaderNew
        title="合同解除"
        :breadCrumb="['合同', '合同列表', '合同解除']"
        :showBack="false"
      />
    </template>
    <a-tabs @change="searchState" type="line">
      <a-tab-pane :key="0" title="待解除"> </a-tab-pane>
      <a-tab-pane :key="1" title="解除中"> </a-tab-pane>
      <a-tab-pane :key="1" title="已解除"> </a-tab-pane>
    </a-tabs>
    <ConditionBox :margin-bottom="20" :margin-top="0">
      <template #left>
        <a-input-search
          :style="{ width: '220px' }"
          placeholder="姓名"
          search-button
          @search="onSearch"
          @press-enter="onSearch"
          v-model="nameSearch"
        />
      </template>
      <template #right>
        <!-- <a-button
          type="primary"
          @click="goDraftContract(null)"
          style="margin-right: 10px"
        >
          发起合同签署
        </a-button> -->
        <a-button
          type="primary"
          @click="goContractRenewalLetterSend"
          style="margin-right: 10px"
        >
          发起续签沟通
        </a-button>
        <a-button
          type="primary"
          @click="goDraftContract(null)"
          style="margin-right: 10px"
        >
          发起起草合同
        </a-button>
        <!-- <a-button type="outline" @click="add(null)" style="margin-right: 10px">
          导入
        </a-button>
        <a-button type="outline" @click="add(null)" style="margin-right: 10px">
          导出
        </a-button> -->
      </template>
    </ConditionBox>
    <table-turn
      :table-data="getTableData"
      ref="tableRef"
      :args="{
        rowSelection: {
          type: 'checkbox',
          showCheckedAll: true,
          onlyCurrent: false
        }
      }"
    >
      <a-table-column :width="80">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column :width="200" data-index="name" title="姓名" />
      <a-table-column :width="200" data-index="mobile" title="手机号码" />
      <a-table-column :width="200" data-index="companyId" title="公司">
        <template #cell="{ record }">
          {{
            companyList.find((item) => item.id === record.companyId)?.name ||
            '-'
          }}
        </template>
      </a-table-column>
      <a-table-column :width="200" data-index="positionLevel" title="职位级别">
        <template #cell="{ record }">
          {{
            positionLevelList.find((item) => item.id === record.positionLevel)
              ?.name || '-'
          }}
        </template>
      </a-table-column>
      <a-table-column :width="200" data-index="positionName" title="职位" />
      <a-table-column :width="200" data-index="natureWork" title="工作性质" />
      <a-table-column :width="200" data-index="definition" title="员工状态">
        <template #cell="{ record }">
          {{
            record.progress === 1
              ? '入职申请'
              : record.progress === 2
              ? '待入职'
              : record.progress === 3
              ? '预入职'
              : record.progress === 4
              ? '入职办理'
              : record.progress === 5
              ? '正式入职'
              : record.progress === 6
              ? '待离职'
              : record.progress === 7
              ? '离职'
              : record.progress === 8
              ? '放弃入职'
              : record.progress === 9
              ? '实习结束'
              : record.progress === 10
              ? '转正'
              : record.progress === 11
              ? '试用期'
              : record.progress === 12
              ? '人事异动'
              : ''
          }}
        </template>
      </a-table-column>
      <a-table-column :width="200" data-index="entryTime" title="入职时间" />
      <a-table-column
        :width="100"
        data-index="contractStatus"
        title="签署状态"
        fixed="right"
      >
        <template #cell="{ record }">
          <div
            :style="{
              color: contractStatus.find(
                ({ value }) => value === record.contractStatus
              )?.color
            }"
          >
            {{
              contractStatus.find(
                ({ value }) => value === record.contractStatus
              )?.text || '-'
            }}
          </div>
        </template>
      </a-table-column>
      <a-table-column :width="100" data-index="" title="操作" fixed="right">
        <template #cell="{ record }">
          <!-- <SwitchOptions :record="record" /> -->
          <!-- 待起草 -->
          <a-space>
            <template
              v-if="
                record.contractStatus === 1 &&
                record.renewal !== 3 &&
                record.renewal !== 2
              "
            >
              <a-link @click="goDraftContract(record.id)">合同起草</a-link>
            </template>
            <!-- 起草不通过 -->
            <template
              v-if="
                record.contractStatus === 2 &&
                record.renewal !== 3 &&
                record.renewal !== 2
              "
            >
              <a-link @click="goDraftContract(record.id)"> 再次起草 </a-link>
            </template>
            <!-- 待提交 -->
            <template v-if="record.contractStatus === 3">
              <!-- <a-link @click="goDraftContractEdit(record.id)">
                配置起草
              </a-link> -->
            </template>
            <template v-if="record.contractStatus === 4">
              <a-link @click="toContractDetails(record)">查看详情</a-link>
            </template>
            <template v-if="record.contractStatus === 5">
              <a-link @click="toContractDetails(record)">查看详情</a-link>
            </template>
            <template v-if="record.contractStatus === 6">
              <a-link @click="toContractDetails(record)">查看详情</a-link>
              <a-link>新增审批</a-link>
            </template>
            <template v-if="record.contractStatus === 7">
              <a-link @click="toContractDetails(record)">查看详情</a-link>
            </template>
            <!-- 待签署 -->
            <template v-if="record.contractStatus === 8">
              <a-link @click="toContractDetails(record)">查看详情</a-link>
            </template>
          </a-space>
        </template>
      </a-table-column>
    </table-turn>
  </ContentCard>
</template>

<script lang="tsx" setup>
import { GetLegalEntityList } from '@/apis/management/organization/organizationManagement/LegalEntity/index';
import { GetPositionLevelList } from '@/apis/management/organization/baseSetting';
import { GetWaitSignedContractList } from '@/apis/management/contract/contractManagement/waitSigned';
import {
  contractRenewalStatus,
  contractStatus
} from '@/utils/dictionary/contract';
import { Message } from '@arco-design/web-vue';

const router = useRouter();
const route = useRoute();

let modalVisible = ref(false); // 判断新增弹出框是否打开
let tableRef = ref();
let nameSearch = ref(route.query.name); // 搜索框值
console.log(111111112);

// 新增
const add = (record: any) => {
  modalVisible.value = true;
};

// 获取表格数据
const getTableData = async (pageData?: any) => {
  try {
    const res = await GetWaitSignedContractList({
      codes: '1,2,3,4,5',
      name: nameSearch.value,
      ...pageData
    });
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};

// 搜索框搜索事件
const onSearch = () => {
  refresh();
};

// 批量起草合同
const goDraftContract = (id: number | null) => {
  if (id) {
    router.push({
      name: 'ContractDraft',
      query: {
        jsonStr: JSON.stringify({ userIds: [id] })
        // userIds: [93, 105]
      }
    });
  } else {
    if (!tableRef.value.selectedList.length) {
      Message.error('请至少选择一项！');
      return;
    }
    if (
      !tableRef.value.selectedListData.every(
        ({ contractStatus, renewal }: any) => {
          return (
            [1, 2].includes(contractStatus) && renewal !== 3 && renewal !== 2
          );
        }
      )
    ) {
      return Message.error('部分数据不可以进行合同起草');
    }
    router.push({
      name: 'ContractDraft',
      query: {
        jsonStr: JSON.stringify({ userIds: tableRef.value.selectedList })
      }
    });
  }
};

// 单个编辑起草合同
const goDraftContractEdit = (userId: number) => {
  router.push({
    name: 'ContractDraftEdit',
    query: {
      userId
    }
  });
};

// 前往确认签署页面
const goConfrimSign = (userId: number) => {
  router.push({
    name: 'ComfirmSignContract',
    query: {
      userId
    }
  });
};

// 发起合同续签
const goContractRenewalSend = (id: number) => {
  goDraftContract(id);
  //
};

// 发起合同续签意向表
const goContractRenewalLetterSend = () => {
  let userIds = tableRef.value.selectedList;
  router.push({
    name: 'ContractRenewalLetterSend',
    query: { jsonStr: JSON.stringify({ userIds: userIds }) }
  });
};

let toContractDetails = (record: any) => {
  console.log(record);
  localStorage.setItem('contractDetailsData', JSON.stringify({ ...record }));
  router.push({ name: 'ContractDetails' });
};
// 刷新表格数据
const refresh = () => {
  tableRef.value.loadData();
};

let companyList = ref<any[]>([]);
let positionLevelList = ref<any[]>([]);
let loadData = async () => {
  let [legalEntity, positionLevel] = await Promise.all([
    GetLegalEntityList({ pageNumber: 0, pageSize: -1 } as any),
    GetPositionLevelList({ page: 1, size: -1 })
  ]);
  companyList.value = legalEntity?.content || [];
  positionLevelList.value = positionLevel?.content || [];
};
loadData();
</script>

<style scoped lang="less">
.enable::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: relative;
  right: 3px;
  background-color: var(--enable);
  // background-color: #fff4d4;
}

:deep(.arco-tabs-nav-tab) {
  margin-top: -10px;
}
</style>
